<script lang="ts" setup>
import { computed, onMounted, ref, reactive, watchEffect } from "vue";
import { getRecommendProListApi } from "@/api/pro";

//二、产品相关业务
interface protype {
  "banners": Array<string>,
  "proid": string,
  "category": string,
  "brand": string,
  "proname": string,
  "originprice": number,
  "sales": number,
  "stock": number,
  "desc": string,
  "issale": number,
  "isrecommend": number,
  "discount": number,
  "isseckill": number,
  "img1": string,
  "img2": string,
  "img3": string,
  "img4": string
}

let proList = reactive<Array<protype>>([]);
console.log("proList", proList);

function getProList(count:number=1,limitNum:number=10) {
  getRecommendProListApi()
    .then((res: any) => {
      if (res.code === "200") {
        proList.splice(0,10,...(res.data as Array<protype>));
      }
    })
}
// 获取数据：
onMounted(() => {
  getProList();
})

</script>
<template>
  <div class="about">
    <h1>产品页面</h1>
    <el-table :data="proList" style="width: 100%">
      <el-table-column fixed prop="proid" label="产品编号" width="150" />
      <el-table-column prop="category" label="分类" width="120" />
      <el-table-column prop="brand" label="品牌" width="120" />
      <el-table-column prop="proname" label="名称" width="320" />
      <el-table-column prop="originprice" label="价格" width="120" />
      <el-table-column prop="sales" label="销量" width="120" />
      <el-table-column prop="stock" label="库存" width="120" />

      <el-table-column label="是否推荐" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.isrecommend"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="是否秒杀" width="120">
        <template #default="scope">
          <el-switch v-model="scope.row.isseckill"></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default>
          <el-button>修改</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
   
  </div>
</template>

<style scoped>

</style>
